<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Tag Completion Using Query Delimiters</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Tag Completion Using Query Delimiters</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#ac-input { width: 250px; }
</style>

<div class="intro">
<p>
This example demonstrates how to use the <code>queryDelimiter</code> config, a custom result filter, and a couple of event handlers to provide suggestions as a user enters tags in an input field. The result list is prepopulated with suggested tags and is displayed immediately when the input field receives focus rather than waiting for the user to begin typing.
</p>
</div>

<div class="example">
    <div id="demo" class="yui3-skin-sam">
  <label for="ac-input">Tags:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI().use('autocomplete', 'autocomplete-filters', 'autocomplete-highlighters', function (Y) {
  var inputNode = Y.one('#ac-input'),
      tags = [
        'css',
        'css3',
        'douglas crockford',
        'ecmascript',
        'html',
        'html5',
        'java',
        'javascript',
        'json',
        'node.js',
        'pie',
        'yui'
      ];

  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: ',',
    source: tags,
    resultHighlighter: 'startsWith',

    // Chain together a startsWith filter followed by a custom result filter
    // that only displays tags that haven't already been selected.
    resultFilters: ['startsWith', function (query, results) {
      // Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get('value').split(/\s*,\s*/);

      // Pop the last item off the array, since it represents the current query
      // and we don't want to filter it out.
      selected.pop();

      // Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);

      // Filter out any results that are already selected, then return the
      // array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });

  // When the input node receives focus, send an empty query to display the full
  // list of tag suggestions.
  inputNode.on('focus', function () {
    inputNode.ac.sendRequest('');
  });

  // After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after('select', function () {
    inputNode.ac.sendRequest('');
    inputNode.ac.show();
  });
});
</script>

</div>

<h2>HTML</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Tags:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;</pre>


<h2>JavaScript</h2>

<h3>Tags Array</h3>

<p>
While a remote result source could also be used, in this example we'll use the following local array of suggested tags to keep things simple:
</p>

<pre class="code prettyprint">var tags = [
  &#x27;css&#x27;,
  &#x27;css3&#x27;,
  &#x27;douglas crockford&#x27;,
  &#x27;ecmascript&#x27;,
  &#x27;html&#x27;,
  &#x27;html5&#x27;,
  &#x27;java&#x27;,
  &#x27;javascript&#x27;,
  &#x27;json&#x27;,
  &#x27;node.js&#x27;,
  &#x27;pie&#x27;,
  &#x27;yui&#x27;
];</pre>


<h2>Implementation</h2>

<pre class="code prettyprint">YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-filters&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  var inputNode = Y.one(&#x27;#ac-input&#x27;);

  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: &#x27;,&#x27;,
    source: tags,
    resultHighlighter: &#x27;startsWith&#x27;,

    &#x2F;&#x2F; Chain together a startsWith filter followed by a custom result filter
    &#x2F;&#x2F; that only displays tags that haven&#x27;t already been selected.
    resultFilters: [&#x27;startsWith&#x27;, function (query, results) {
      &#x2F;&#x2F; Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get(&#x27;value&#x27;).split(&#x2F;\s*,\s*&#x2F;);

      &#x2F;&#x2F; Pop the last item off the array, since it represents the current query
      &#x2F;&#x2F; and we don&#x27;t want to filter it out.
      selected.pop();

      &#x2F;&#x2F; Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);

      &#x2F;&#x2F; Filter out any results that are already selected, then return the
      &#x2F;&#x2F; array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });

  &#x2F;&#x2F; When the input node receives focus, send an empty query to display the full
  &#x2F;&#x2F; list of tag suggestions.
  inputNode.on(&#x27;focus&#x27;, function () {
    inputNode.ac.sendRequest(&#x27;&#x27;);
  });

  &#x2F;&#x2F; After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after(&#x27;select&#x27;, function () {
    inputNode.ac.sendRequest(&#x27;&#x27;);
    inputNode.ac.show();
  });
});</pre>


<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Tags:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;

&lt;script&gt;
YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-filters&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  var inputNode = Y.one(&#x27;#ac-input&#x27;),
      tags = [
        &#x27;css&#x27;,
        &#x27;css3&#x27;,
        &#x27;douglas crockford&#x27;,
        &#x27;ecmascript&#x27;,
        &#x27;html&#x27;,
        &#x27;html5&#x27;,
        &#x27;java&#x27;,
        &#x27;javascript&#x27;,
        &#x27;json&#x27;,
        &#x27;node.js&#x27;,
        &#x27;pie&#x27;,
        &#x27;yui&#x27;
      ];

  inputNode.plug(Y.Plugin.AutoComplete, {
    activateFirstItem: true,
    allowTrailingDelimiter: true,
    minQueryLength: 0,
    queryDelay: 0,
    queryDelimiter: &#x27;,&#x27;,
    source: tags,
    resultHighlighter: &#x27;startsWith&#x27;,

    &#x2F;&#x2F; Chain together a startsWith filter followed by a custom result filter
    &#x2F;&#x2F; that only displays tags that haven&#x27;t already been selected.
    resultFilters: [&#x27;startsWith&#x27;, function (query, results) {
      &#x2F;&#x2F; Split the current input value into an array based on comma delimiters.
      var selected = inputNode.ac.get(&#x27;value&#x27;).split(&#x2F;\s*,\s*&#x2F;);

      &#x2F;&#x2F; Pop the last item off the array, since it represents the current query
      &#x2F;&#x2F; and we don&#x27;t want to filter it out.
      selected.pop();

      &#x2F;&#x2F; Convert the array into a hash for faster lookups.
      selected = Y.Array.hash(selected);

      &#x2F;&#x2F; Filter out any results that are already selected, then return the
      &#x2F;&#x2F; array of filtered results.
      return Y.Array.filter(results, function (result) {
        return !selected.hasOwnProperty(result.text);
      });
    }]
  });

  &#x2F;&#x2F; When the input node receives focus, send an empty query to display the full
  &#x2F;&#x2F; list of tag suggestions.
  inputNode.on(&#x27;focus&#x27;, function () {
    inputNode.ac.sendRequest(&#x27;&#x27;);
  });

  &#x2F;&#x2F; After a tag is selected, send an empty query to update the list of tags.
  inputNode.ac.after(&#x27;select&#x27;, function () {
    inputNode.ac.sendRequest(&#x27;&#x27;);
    inputNode.ac.show();
  });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to provide autocomplete suggestions from a local array.">
                                        <a href="ac-local.html">Basic Local Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
                                        <a href="ac-jsonp.html">Remote Data via JSONP</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a YQL query source.">
                                        <a href="ac-yql.html">Remote Data via YQL</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
                                        <a href="ac-datasource.html">Remote Data via DataSource</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to implement delimited tag completion.">
                                        <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
                                        <a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
                                        <a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
